.m-color-select {
    display: flex;
    flex-flow: column nowrap;
    .m-color-select__title {
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        color: #ff5555;
    }
    .m-color-select__color-wheel {
        width: 400px;
        height: 400px;
        position: relative;
        .color-wheel {
            position: absolute;
            width: 50%;
            height: 50%;
            z-index: 20;
        }
        .color-wheel--1 {
            top: 0;
            left: 0;
            background: url('../../../assets/colorGenerate/wheel1.png') no-repeat center;
            background-size: 100% 100%;
        }
        .color-wheel--2 {
            top: 0;
            left: 50%;
            background: url('../../../assets/colorGenerate/wheel2.png') no-repeat center;
            background-size: 100% 100%;
        }
        .color-wheel--3 {
            top: 50%;
            left: 0;
            background: url('../../../assets/colorGenerate/wheel3.png') no-repeat center;
            background-size: 100% 100%;
        }
        .color-wheel--4 {
            top: 50%;
            left: 50%;
            background: url('../../../assets/colorGenerate/wheel4.png') no-repeat center;
            background-size: 100% 100%;
        }
        .color-wheel--active {
            width: 50%;
            height: 50%;
            position: absolute;
            top: 25%;
            left: 25%;
            background: #ff5555;
            z-index: 10;
        }

        .color-wheel__dot-1 {
            position: fixed;
            box-sizing: border-box;
            border-radius: 100%;
            border: 1px solid rgb(145, 138, 138);
            background: rgba(0, 0, 0, 0.7);
            z-index: 25;
        }
    }
}

.m-alpha-select {
    display: flex;
    flex-flow: column nowrap;
    .alpha-box {
        position: relative;
        background: #fff;
        width: 140px;
        height: 140px;
        .alpha-cover {
            position: absolute;
            top: -28px;
            left: -26px;
            width: 190px;
            height: 190px;
            background: url('../../../assets/colorGenerate/sv_slider_alpha.png') no-repeat top center;
            .alpha-dot {
                position: fixed;
                box-sizing: border-box;
                border-radius: 100%;
                border: 1px solid rgb(145, 138, 138);
                background: rgba(0, 0, 0, 0.7);
                z-index: 25;
            }
        }
    }
}

.output-color {
    margin-top: 50px;
    display: flex;
    flex-flow: column nowrap;
    .output-container {
        display: flex;
        flex-flow: column nowrap;
        .plan-title {
            font-size: 16px;
            color: #353535;
            font-weight: bold;
            margin: 10px 0;
        }
        .color-box {
            display: flex;
            flex-flow: row nowrap;
            .plan-item {
                width: 100px;
                height: 80px;
                margin-right: 20px;
                border-radius: 5px;
                background: #ff5555;
                color: #fff;
                font-weight: bold;
                text-align: center;
                line-height: 80px;
            }
        }
    }
}
